<!-- 后台欢迎主页 -->
<template>
  <div class="content-container">
    <div class="show-data row">
      <div class="item-list" v-for="(v,k) in itemList" :key="k">
        <div class="item">
          <div class="title-box clearfix">
            <h5 class="fl title">{{v.title}}</h5>
            <span class="fr label" :class="v.type">{{v.label}}</span>
          </div>
          <div class="status-box clearfix">
            <h1 class="num">{{v.num}}</h1>
            <router-link :to="v.route">{{v.status}}</router-link>
            <span class="fr stat-percent" v-if="v.percent">
              {{v.percent}}
              <i :class="v.icon" v-if="v.icon"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="show-echarts">
      <div class="order">
        <div class="title">订单</div>
        <order-echarts></order-echarts>
      </div>
      <div class="user">
        <div class="title">用户</div>
        <user-echarts></user-echarts>
      </div>
    </div>
  </div>
</template>

<script>
import OrderEcharts from "@/components/echarts/order";
import UserEcharts from "@/components/echarts/user";
export default {
  components: {
    OrderEcharts,
    UserEcharts
  },
  data() {
    return {
      itemList: [
        {
          title: "订单",
          label: "急",
          type: 'danger',
          num: 0,
          status: "待发货",
          route: "/dashboard/order/wait-delivery"
        },
        {
          title: "订单",
          label: "待",
          type: 'primary',
          num: 4,
          status: "待收货",
          route: "/dashboard/order/wait-receiving"
        },
        {
          title: "商品",
          label: "急",
          type: 'danger',
          num: 2,
          status: "库存预警",
          route: "/dashboard/goods/list"
        },{
          title: "订单",
          label: "待",
          type: 'danger',
          num: 0,
          status: "待提现",
          route: "/dashboard/goods/list"
        },{
          title: "订单",
          label: "昨",
          type: 'primary',
          num: 1,
          status: "昨日支付订单数",
          route: "/dashboard/goods/list"
        },{
          title: "交易",
          label: "昨",
          type: 'primary',
          num: 10,
          status: "昨日交易额",
          route: "/dashboard/order/list",
          percent: '0%'
        },{
          title: "粉丝",
          label: "今",
          type: 'primary',
          num: 69,
          status: "今日新增粉丝",
          route: "/dashboard/member/list",
          percent: '52%',
          icon: 'el-icon-bottom'
        },{
          title: "粉丝",
          label: "月",
          type: 'primary',
          num: 1668,
          status: "本月新增粉丝",
          route: "/dashboard/member/list",
          percent: '120%',
          icon: 'el-icon-top'
        }
      ]
    };
  }
};
</script>
<style scoped lang="less">
.content-container {
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
  .show-data {
    display: flex;
    flex-wrap: wrap;
    .item-list {
      width: 25%;
      padding-right: 15px;
      padding-left: 15px;
      margin-bottom: 15px;
      .item {
        border-top: 4px solid #e7eaec;
        background-color: #fff;
        .title-box {
          border-bottom: 1px solid #e7eaec;
          padding: 14px 15px 7px;
          min-height: 48px;
          .title {
            font-size: 14px;
          }
          .label {
            font-size: 10px;
            font-weight: 600;
            padding: 2px 8px;
            color: #fff;
            border-radius: 2px;
          }
          .danger {
            background: #ed5565;
          }
          .primary {
            background: #0092dc;
          }
        }
        .status-box {
          padding: 15px 20px 20px;
          .num {
            font-weight: normal;
          }
          a {
            font-size: 12px;
            color: #333;
            &:hover {
              color: #777;
            }
          }
          .stat-percent {
            font-weight: bold;
            color: #0092dc;
            i{
              font-weight: bold;
            }
          }
        }
      }
    }
  }
  .show-echarts {
    .order,
    .user {
      background-color: #fff;
    }
    .title {
      padding: 14px 15px 7px;
      min-height: 48px;
      font-weight: bold;
      border-top: 4px solid #e7eaec;
      border-bottom: 1px solid #e7eaec;
      margin-bottom: 15px;
    }
    .user {
      margin-top: 15px;
    }
  }
}
</style>
